<script setup lang="ts">
import {ref, watch} from "vue";
import {useRoute} from "vue-router";
import SidebarLogo from "@/layouts/components/sidebar/SidebarLogo.vue";
import SidebarMenu from "@/layouts/components/sidebar/SidebarMenu.vue";
import HeaderBreadCrumb from "@/layouts/components/header/HeaderBreadCrumb.vue";
import HeaderOperate from "@/layouts/components/header/HeaderOperate.vue";
import HeaderMenu from "@/layouts/components/header/HeaderMenu.vue";
import TabsOperate from "@/layouts/components/tabs/TabsOperate.vue";
import MainContent from "@/layouts/components/content/MainContent.vue";


const route = useRoute();


// 是否折叠
const isCollapsed = ref<boolean>(false);


/**
 * 动态监听路由，更改页面标题
 */
watch(() => route.path, () => {
    document.title = route.meta?.breadcrumb as string;
}, {immediate: true});
</script>

<template>
    <div class="admin-container">
        <n-layout has-sider class="layout-container">
            <n-layout-sider
                class="layout-sidebar"
                :class="{collapsed: isCollapsed}"
                :width="240"
                :collapsed="isCollapsed"
                :collapse-mode="'width'"
                :collapsed-width="64"
                bordered
                show-trigger
                @update-collapsed="isCollapsed = !isCollapsed"
            >
                <SidebarLogo/>
                <SidebarMenu :collapsed="isCollapsed"/>
            </n-layout-sider>

            <n-layout class="layout-main">
                <n-layout-header class="layout-header" bordered>
                    <div class="header-left">
                        <HeaderBreadCrumb/>
                    </div>

                    <div class="header-right">
                        <HeaderOperate/>
                        <HeaderMenu/>
                    </div>
                </n-layout-header>

                <TabsOperate/>

                <n-layout-content class="layout-content">
                    <MainContent/>
                </n-layout-content>
            </n-layout>
        </n-layout>
    </div>
</template>

<style lang="scss">
.admin-container {
    background-image: url("@/assets/image/theme/theme-two.png");
    background-size: cover;

    .layout-container {
        height: 100vh;

        .layout-sidebar {
            height: 100%;
            //background: #fff9 !important;

            &.collapsed {
                .sidebar-logo {
                    h2 {
                        display: none;
                    }
                }
            }
        }

        .layout-main {
            width: calc(100% - 240px);
            background: #fff9 !important;

            .n-layout-header {
                padding: 0 10px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                //background: #fff9 !important;

                .header-right {
                    display: flex;
                    align-items: center;
                    gap: 24px;
                }
            }

            .layout-content {
                padding: 10px;
                height: calc(100% - 100px);
                background-color: #eeeeee;
                //background: #fff9 !important;

                ::-webkit-scrollbar {
                    width: 0;
                    height: 0;
                    background-color: transparent;
                }
            }
        }
    }
}
</style>